<template>
<div>
  <div class="common-layout">
    <el-container>
      <el-header >
        <el-menu
            class="el-menu-demo"
            mode="horizontal"
            text-color="#606266"
            active-text-color="#fc9002"
            :default-active="router.currentRoute.value.path"
            router>
          <div style="display: flex;">
            <div style="display: flex;align-items: center;text-align: center;min-width: 350px;justify-content: center;color: #606266;font-size: 16px;font-weight: bold;margin: 0 40px;">
              餐厅管理系统
            </div>
          </div>
          <el-menu-item index="/front/index">首页</el-menu-item>
          <el-menu-item index="/front/newslist">新闻公告</el-menu-item>
          <el-menu-item index="/front/goodslist">菜品信息</el-menu-item>
          <el-menu-item index="/front/messagelist">反馈建议</el-menu-item>
          <div style="display: flex;float: right" v-if="JSON.stringify(data.member)!=='{}'">
            <div style="display: flex;align-items: center;text-align: center;justify-content: center;font-size: 14px;font-weight: bold;margin-left: 100px;">
              <el-sub-menu index="2">
                <template #title>个人中心</template>
                <el-menu-item index="/front/favlist"><el-icon><CircleCheck /></el-icon> 收藏夹</el-menu-item>
                <el-menu-item index="/front/cartlist"><el-icon><CircleCheck /></el-icon> 购物车</el-menu-item>
                <el-menu-item index="/front/ordermsglist"><el-icon><CircleCheck /></el-icon> 订单管理</el-menu-item>
                <el-menu-item index="/front/memberpreson"><el-icon><User /></el-icon> 个人信息编辑</el-menu-item>
                <el-menu-item index="/front/memberpass"><el-icon><lock/></el-icon> 个人密码编辑</el-menu-item>
                <el-menu-item @click="logout"><el-icon><SwitchButton /></el-icon> 安全退出</el-menu-item>
              </el-sub-menu>
              <img style="width: 40px; height: 40px;margin-right: 10px; border-radius: 50%" :src="data.member.img" alt="">
              <span>{{data.member.username}} / {{data.member.name}}</span>
            </div>
          </div>

          <div style="display: flex;float: right" v-if="JSON.stringify(data.member)==='{}'">
            <div style="display: flex;align-items: center;text-align: center;justify-content: center;color: #ffffff;font-size: 14px;font-weight: bold;margin-left: 250px;">
              <el-button type="primary" @click="router.push('/front/memberLogin')">登录</el-button>
              <el-button type="warning" @click="router.push('/front/memberReg')">注册</el-button>
            </div>
          </div>

        </el-menu>

      </el-header>
      <el-main style="min-height: calc(100vh - 120px);padding: 5px;background-color: #f8f8ff">
        <RouterView @updatemember="updatemember"/>
      </el-main>
      <el-footer style="background-color: #ffab4e;height: 60px;padding: 0;">
          <div  style="display: flex;justify-content: center;padding-top: 20px;font-size: 16px;font-weight: bold;">
            <a href="/login" target="_blank" style="color: rgba(0,0,0,0.89);text-decoration: none">后台管理中心</a>
          </div>

        <el-backtop :bottom="100">
          <div style=" height: 100%; width: 100%; background-color: var(--el-bg-color-overlay); box-shadow: var(--el-box-shadow-lighter); text-align: center; line-height: 40px; color: #1989fa;">
            <el-icon><ArrowUpBold /></el-icon></div>
        </el-backtop>
      </el-footer>
    </el-container>
  </div>



</div>


</template>

<script setup>
import router from "@/router/index.js";
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {ArrowDown, ArrowUpBold, CircleCheck, Lock, SwitchButton, User} from "@element-plus/icons-vue";
const data = reactive({
  member: JSON.parse(localStorage.getItem('member') || '{}')

})

const updatemember = () => {
  data.member = JSON.parse(localStorage.getItem('member') || '{}')
}

const logout = () => {
  ElMessage.success('操作成功')
  localStorage.removeItem('member')
  //router.push('/front/memberLogin')
  window.location.href = '/front/memberLogin'
}
</script>

<style scoped>
.el-menu-demo .el-menu-item.is-active {
  border-bottom: 2px solid #ffb31a;
}
/*鼠标移入高亮*/
.el-menu-item:hover{
  color: #fc9002 !important;
  background-color: #fff !important;
  font-weight: bold;
}
/*设置选中菜单的背景色*/
.el-menu-item.is-active{
  background-color: #fff;
  font-weight: bold;
}

.el-sub-menu:hover{
  color: #fc9002 !important;
  font-weight: bold !important;
  background-color: white !important;
}

</style>